<script setup lang='ts' name="delivery-address">
import type { PlusColumn } from 'plus-pro-components'
import type { VxePagerEvents, VxeTableInstance } from 'vxe-table'

import { useDeleteOrderAddressInfo, useGetOrderAddressPage } from '@fl/api/purchase'
import { SearchForm, SearchTable } from '@fl/components'
import ButtonItem from '@fl/components/button-item.vue'
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'

import AddOrEdit from './add-or-edit.vue'

const gridOptions = reactive<any>({
    align: 'center',
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'projectName', title: '项目名称' },
        { field: 'consignee', title: '收货人' },
        { field: 'phone', title: '收货人电话' },
        { field: 'address', title: '收货地址' },
        { slots: { default: 'operate' }, title: '操作', width: 300 },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 530,
    keepSource: true,
    loading: false,
    pagerConfig: {
        currentPage: 1,
        enabled: true,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500],
        total: 0,
    },
    showOverflow: true,
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})

const btns = [
    {
        label: '编辑',
        text: true,
        value: 'edit',
    },
    {
        label: '删除',
        text: true,
        value: 'delete',
    },
]

const schema: PlusColumn[] = [
    {
        colProps: {
            span: 6,
        },
        label: '项目名称',
        prop: 'projectName',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 6,
        },
        label: '收货人',
        prop: 'consignee',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 6,
        },
        label: '收货人电话',
        prop: 'phone',
        valueType: 'copy',
    },
] as const

const state = {
    consignee: '',
    phone: '',
    projectName: '',
}

const form = ref({
    ...state,
})

const searchParams = computed(() => {
    return {
        ...form.value,
        page: gridOptions.pagerConfig.currentPage,
        size: gridOptions.pagerConfig.pageSize,
    }
})

const { data, isLoading } = useGetOrderAddressPage(searchParams)
const { isPending, mutate } = useDeleteOrderAddressInfo()
const tableLoading = computed(() => isLoading.value || isPending.value)
const id = ref('')
const tableRef = ref<VxeTableInstance<any>>()
const visible = ref(false)
const detail = ref<any>({})

const show = ref(true)

function doAction(item: any, row: any) {
    switch (item.value) {
        case 'view':
            detail.value = cloneDeep(row)
            show.value = false
            break
        case 'edit':
            showEdit(row)
            break
        case 'delete':
            deleteInfo(row)
            break
        default:
            break
    }
}

function reset() {
    form.value = {
        ...state,
    }
}

function showAdd() {
    id.value = ''
    visible.value = true
}
function showEdit(row: any) {
    id.value = row.id
    visible.value = true
}
function deleteInfo(row: any) {
    mutate(row.id, {
        onSuccess: () => {
            ElMessage.success('删除成功')
        },
    })
}
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    gridOptions.pagerConfig.currentPage = currentPage
    gridOptions.pagerConfig.pageSize = pageSize
}

function searchList(value: any) {
    form.value = Object.assign({}, value)
}

watchEffect(() => {
    if (data.value) {
        console.log(data.value)
        gridOptions.data = data.value.records ?? []
        gridOptions.pagerConfig.total = data.value.total ?? 0
    }
})
</script>

<template>
    <ElCard mb-20>
        <SearchForm v-bind="form"
                    :columns="schema"
                    submit-text="查询"
                    @submit="searchList"
                    @reset="reset"
        />
    </ElCard>

    <ElCard>
        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-model:pager="gridOptions.pagerConfig"
                     :loading="tableLoading"
                     @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <el-space>
                    <el-button type="primary"
                               @click="showAdd"
                    >
                        <div class="i-ic:baseline-add size-16" />
                        新增收货地址
                    </el-button>
                </el-space>
            </template>

            <template #operate="{ row }">
                <ButtonItem :btns="btns"
                            @btn-click="doAction($event, row)"
                />
            </template>

            <template #name="{ row }">
                <span style="color: #99c3fb;">{{ row.name }}</span>
            </template>
        </SearchTable>
    </ElCard>

    <AddOrEdit :key="id"
               v-model:visible="visible"
               v-model:id="id"
    />
</template>
